<template>
  <a-sub-menu
    v-if="menu[fields.children] && menu[fields.children].length"
    :key="menu[fields.key]"
    :popup-class-name="popupClassName"
    class="antd-menu-submenu"
  >
    <template #title>
      <!-- 包含子菜单值点击 -->
      <div class="antd-menu-item flex flex-middle" @click="() => $emit('titleClick', menu)">
        <template v-if="menu[fields.icon]">
          <img v-if="typeof menu[fields.icon] === 'string'" :src="menu[fields.icon]" class="antd-menu-icon" />
          <component v-else :is="menu[fields.icon]" class="antd-menu-icon" />
        </template>
        <template v-if="menu[fields.title]">
          <span v-if="typeof menu[fields.title] === 'string'" v-html="menu[fields.title]"></span>
          <component v-else :is="menu[fields.title]" />
        </template>
      </div>
    </template>
    <sub-menu
      v-for="item of menu[fields.children]"
      :menu="item"
      :fields="fields"
      :popup-class-name="popupClassName"
      @titleClick="() => $emit('titleClick', item)"
    />
  </a-sub-menu>
  <a-menu-item v-else :key="menu[fields.key]">
    <!--  子菜单值点击 -->
    <div class="antd-menu-item flex flex-middle">
      <template v-if="menu[fields.icon]">
        <img v-if="typeof menu[fields.icon] === 'string'" :src="menu[fields.icon]" class="antd-menu-icon" />
        <component v-else :is="menu[fields.icon]" class="antd-menu-icon" />
      </template>
      <template v-if="menu[fields.title]">
        <span v-if="typeof menu[fields.title] === 'string'" v-html="menu[fields.title]"></span>
        <component v-else :is="menu[fields.title]" />
      </template>
    </div>
  </a-menu-item>
</template>

<script>
export default {
  name: 'sub-menu',
  emits: ['titleClick'],
  props: {
    menu: { type: Object, default: () => ({}) },
    fields: { type: Object, default: () => ({}) },
    popupClassName: { type: String, default: undefined },
  },
};
</script>

<style></style>
